<template>
    <div class="coo-list-wrap">
        <div class="panel">
            <div class="title">同步类型</div>
            <el-radio-group v-model="type">
                <el-radio :label="1">增量同步</el-radio>
                <el-radio :label="2">全量同步</el-radio>
            </el-radio-group>
        </div>
        <div class="panel">
            <div class="title">同步范围</div>
            <el-row style="width: 90%;">
                <el-col :span="7">
                    <div class="sub-title">源</div>
                    <div class="margin10">
                        数据库：
                        <el-select v-model="start_db" placeholder="" clearable>
                            <el-option v-for="(val, key) in dbList" :key="key" :label="val.name" :value="key" />
                        </el-select>
                    </div>
                    <div class="sub-title">信息</div>
                    <div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">连接类型：</div>
                                <span v-if="start_db">{{dbList[start_db].type}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">数据库名称：</div>
                                <span v-if="start_db">{{dbList[start_db].name}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">IP地址：</div>
                                <span v-if="start_db">{{dbList[start_db].ip}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">端口号：</div>
                                <span v-if="start_db">{{dbList[start_db].post}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">服务器版本：</div>
                                <span v-if="start_db">{{dbList[start_db].version}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="sub-title" v-if="start_db">数据表</div>
                    <div v-if="start_db">
                        <div v-for="(val, key) in dbList[start_db].table" :key="key" class="margin10" >
                            <input type="checkbox" :value="val.value" v-model="selectedCheckboxes" style="margin-right: 5px;width:18px">
                            <i class="el-icon-s-grid" style="margin-right: 5px;font-size:18px"></i>{{val.value}}
                        </div>
                    </div>
                </el-col>
                <el-col :span="3" style="position: relative; top: 40%;">
                    <img src="@/assets/right.png" alt="" width="50px">
                </el-col>
                <el-col :span="9">
                    <div class="sub-title">目标</div>
                    <div class="margin10">
                        数据库：
                        <el-select v-model="end_db" placeholder="" clearable>
                            <el-option v-for="(val, key) in dbList" :key="key" :label="val.name" :value="key" />
                        </el-select>
                    </div>
                    <div class="sub-title">信息</div>
                    <div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">连接类型：</div>
                                <span v-if="end_db">{{dbList[end_db].type}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">数据库名称：</div>
                                <span v-if="end_db">{{dbList[end_db].name}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">IP地址：</div>
                                <span v-if="end_db">{{dbList[end_db].ip}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">端口号：</div>
                                <span v-if="end_db">{{dbList[end_db].post}}</span>
                            </div>
                        </div>
                        <div class="margin10">
                            <div style="display: flex;">
                                <div style="width: 140px;">服务器版本：</div>
                                <span v-if="end_db">{{dbList[end_db].version}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="sub-title" v-if="end_db">数据表</div>
                    <div v-if="end_db">
                        <div v-for="(val, key) in dbList[end_db].table" :key="key" class="margin10" >
                            <input type="checkbox" :value="val.value" v-model="selectedCheckboxes" style="margin-right: 5px;width:18px">
                            <i class="el-icon-s-grid" style="margin-right: 5px;font-size:18px"></i>{{val.value}}
                        </div>
                    </div>
                </el-col>
            </el-row>
            
        </div>
        <div style="position: absolute; bottom: 30px; right: 70px;">
            <el-button type="primary">比对</el-button>
            <el-button type="primary">同步</el-button>
        </div>
    </div>
</template>

<script>
import { Checkbox } from 'element-ui';

  
export default {
    data: function() {
        return {
            type: 0,
            start_db: null,
            end_db: null,
            selectedCheckboxes: [],
            dbList: {
                "0": {
                    "name": "stback01",
                    "type": "MySQL",
                    "ip": "10.197.164.125",
                    "post": "1521",
                    "version": "8.0.13",
                    "table": [
                        {  
                            id: 1,
                            value: "customer_number",
                        
                        },
                        {  
                            id: 2,
                            value: "shop_number",
                        
                        },
                        {  
                            id: 3,
                            value: "dim_number",
                        
                        },
                        {  
                            id: 4,
                            value: "banner",
                        
                        },
                        {  
                            id: 5,
                            value: "info",
                        },
                        {  
                            id: 6,
                            value: "store",
                        },
                        {  
                            id: 6,
                            value: "bank_number",
                        }]
                },
                "1": {
                    "name": "pgstb02",
                    "type": "MySQL",
                    "ip": "10.197.164.127",
                    "post": "5432",
                    "version": "8.0.13",
                    "table": [
                        {  
                            id: 1,
                            value: "customer_profit",
                        },
                        {  
                            id: 2,
                            value: "user_number",
                        },
                        {  
                            id: 3,
                            value: "order_number",
                        }]
                },
                "2": {
                    "name": "pg12stb01",
                    "type": "MySQL",
                    "ip": "10.197.164.128",
                    "post": "5432",
                    "version": "8.0.13",
                    "table": [
                        {  
                            id: 1,
                            value: "school_number",
                        },
                        {  
                            id: 2,
                            value: "shop_number",
                        },
                        {  
                            id: 3,
                            value: "profit_number",
                        }]
                },
            },
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    // position: relative;
    background-color: #fff;
    .panel {
        padding: 30px 0 0 30px;
        display: flex;
        font-size: 16px;
    }
    .title {
        color: #606266;
        font-size: 18px;
        font-weight: 600;
        margin-right: 40px;
    }
    .sub-title {
        font-size: 16px;
        color: #409EFF;
        line-height: 24px;
    }
    ::v-deep {
		.panel {
            .el-radio-group .el-radio .el-radio__label {
                font-size: 18px;
                line-height: 24px;
            }
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
    .margin10 {
        margin: 10px 0;
    }
    .float {
        float: left;
        width: 80px;
    }
    
}

</style>